<template>
	<view class="index-page with-tabbar">
		<!-- 1. 顶部自定义导航栏 -->

		<u-navbar :bgColor="bgColor" :safeAreaInsetTop="true" :placeholder="true" :fixed="true" @leftClick="goBack">
			<view class="u-nav-slot flex-center" :style="{ 'margin-right': custom.width + 10 + 'px' }" slot="right">
				<div class="iconfont pr-20 pl-20 fontS42"
					:class="jobDetail.isStoreUp ? 'color-yellowG icon-shoucang1' : 'icon-shoucang'" @click="collectBtn">
				</div>
			</view>
		</u-navbar>
		<!-- 页面主要内容区域 -->
		<view class="page-content" v-if="loading" :style="{ paddingTop: headerHeight + 'px' }">
			<div class="flex align-center lh-50">
				<div class="fontS48">{{ jobDetail.professionName }}</div>
				<div class="ml-auto fontS40 color-orange font-weight text-right" style="min-width: 200upx;">{{
					jobDetail.salary
				}}/月</div>
			</div>
			<div class="flex align-center lh-34 fontS24 color-6 mt-28">
				{{ jobDetail.experienceRequireName }} | {{ jobDetail.minEducationName }} | {{ jobDetail.postTypeName }}
				| {{ jobDetail.cityName }}{{ jobDetail.areaName }}
			</div>
			<div class="flex align-center mt-28 position-zp font-bold">
				<div>{{
					jobDetail.postType === 3
						? '实习生岗位'
						: jobDetail.postType === 2
							? '应届生招聘'
							: jobDetail.postType === 4
								? '兼职岗位'
								: '普通岗位'
				}}</div>
				<div class="color-d">|</div>
				<div>{{ jobDetail.status === 0 ? '审核中' : jobDetail.status === 1 ? '招聘中' : jobDetail.status === 2 ?
					'审核失败' : '已关闭'
				}}</div>
			</div>
			<div class="flex algin-center mt-42 hr-info pb-40 bor-b lh-104">
				<div class="flex-center" style="width: calc(100% - 150upx);">
					<image class="headImg" v-if="jobDetail.headImg"
						:src="jobDetail.headImg.indexOf('https://') > -1 ? jobDetail.headImg : baseUrl + jobDetail.headImg"
						mode="aspectFill">
					</image>
					<image v-else class="headImg" src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/头像更换.png">
					</image>

					<div class="ml-20" style="width: calc(100% - 130upx);">
						<div class="mt-6 fontS28 lh-30 fontE2 "><span class="font-bold">{{ jobDetail.nickName
						}}</span>·<span class="fontS20 color-3">{{
									jobDetail.creatorPostName }}</span></div>
						<div class="mt-8 fontS20 color-6 lh-30">{{ jobDetail.companyName }}</div>
					</div>
				</div>
				<div class="ml-auto color-3b fontS22" @click="viewMore">查看更多职位></div>
			</div>

			<template v-if="jobDetail.postType === 2">
				<div class="position-title">招聘范围</div>
				<div class="detail-text">面向毕业时间为{{ jobDetail.graduationStartTime }}-{{ jobDetail.graduationEndTime
				}}年的应届毕业生</div>
				<div class="detail-text"> 招聘截止日为: {{ jobDetail.postDeadlineDate }} </div>
			</template>
			<template v-if="jobDetail.postType === 4">
				<div class="position-title">兼职时间</div>
				<div class="detail-text">{{ jobDetail.partDateName }}/{{ jobDetail.partTimeSlotName }}/{{
					jobDetail.partWeekDayName }}</div>
			</template>
			<template v-if="jobDetail.postType === 3">
				<div class="position-title">实习要求</div>
				<div class="detail-text">实习月数不低于{{ jobDetail.minMonth }}个月</div>
				<div class="detail-text">每周到岗天数不低于{{ jobDetail.minDay }}天</div>
			</template>
			<div class="position-title">职位详情</div>
			<div class="flex align-center flex-wrap" v-if="jobDetail.postKey.length > 0">
				<div class="hr-tag mr-32 mb-10" v-for="(item, index) in jobDetail.postKey.split(',')" :key="index">{{
					item
				}}</div>
			</div>
			<div class="mt-8" v-if="jobDetail.postDescribe">
				<rich-text v-html="jobDetail.postDescribe"></rich-text>
			</div>

			<div class="position-title">福利/其他</div>
			<rich-text v-if="jobDetail.benefit" v-html="jobDetail.benefit"></rich-text>
			<div class="position-title">工作地址</div>
			<div>{{ jobDetail.provinceName }}{{ jobDetail.cityName }}{{ jobDetail.areaName }}{{ jobDetail.address }}
			</div>
			<div class="position-title">企业简介</div>
			<div>{{ jobDetail.introduction || '' }}</div>
			<div class="bottom" v-if="!hireStatus">

				<div class="bottomBtn fontS26" @click="toTalk">立即沟通
				</div>

			</div>

		</view>

	</view>
</template>
<script>
import {
	getPositionDetail,
	postAction,
	postActionCancle
} from "@/api/index";

export default {

	data() {
		return {
			bgColor: 'transparent',
			headerHeight: 30,
			baseUrl: getApp().globalData.baseUrl,
			positionId: null,
			jobDetail: null,
			loading: false,

			custom: null,
			navTop: null,
			share: {
				path: 'pages/index/index',
			},
			shareLine: {
				title: getApp().globalData.shareTitle,
				imageUrl: getApp().globalData.sellerHead
			},
			hireStatus: false


		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	onShareTimeline() {
		return {
			title: this.shareLine.title,
			// imageUrl: this.shareLine.imageUrl,
		}
	},
	onShareAppMessage(res) {
		console.log(res)

		if (res.from === 'button') {
			return {
				title: this.shareLine.title,
				path: '/pages/index/index',
				// imageUrl: this.weeklyDetailInfo.coverUrl,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		} else {
			return {
				title: this.shareLine.title,
				path: '/pages/index/index',
				// imageUrl: this.houseListInfo.houseCover,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > 1) {
			this.bgColor = '#fff'
		} else {
			this.bgColor = 'transparent'
		}
	},
	async onLoad(options) {
		if (options.type) {
			this.hireStatus = true
		}
		this.custom = wx.getMenuButtonBoundingClientRect()
		this.positionId = options.positionId
		await this.getDetail();
	},
	methods: {
		async goBack() {
			uni.navigateBack({
				delta: 1,
				fail() {
					uni.switchTab({
						url: '/pages/home/home'
					})
				}

			})
		},
		async getDetail() {
			const {
				data
			} = await getPositionDetail(this.positionId)
			data.postDescribe = data.postDescribe.replace(/\n/g, '<br/>')
			this.jobDetail = data
			this.loading = true
		},
		async collectBtn() {
			console.log('点击收藏')
			let api = this.jobDetail.isStoreUp === false ? postAction : postActionCancle
			let param = {
				id: this.jobDetail.id,
				postId: this.jobDetail.id,
				type: 4
			}
			const {
				data
			} = await api(param)
			await this.getDetail()


		},
		async viewMore() {
			uni.navigateTo({
				url: `/pages/position/morePosition?companyId=${this.jobDetail.companyId}`
			})
		},
		async toTalk() {
			if (this.jobDetail.creatorId === this.userInfo.userId) {
				uni.showToast({ title: '此为同一账号，不能发起聊天', icon: 'none' })
				return false;
			}
			let param = {
				id: this.jobDetail.id,
				postId: this.jobDetail.id,
				type: 1
			}
			const {
				data
			} = await postAction(param)
			console.log('data===>', this.jobDetail);
			const { creatorId, nickName, id } = this.jobDetail;

			uni.navigateTo({
				url: `/pages/chatroom/chatroom?toUserId=company_${creatorId}&nick=${nickName}&jobId=${id}&position=position`
			})
		},

	},

	oPullDownRefresh() {
	},
};
</script>

<style lang="less" scoped>
@import url(index.less);

.index-page {
	background: linear-gradient(180deg, #dcffed 100upx, #f7f7f7 500upx);
}
</style>
